/*
 * @Author: wwssaabb
 * @Date: 2021-02-26 08:59:02
 * @LastEditTime: 2021-03-03 16:20:50
 * @FilePath: \sass_demo\Visual Block\sass\main_test.scss
 */
$bg_img:'../static/bg.jpg';
$base_width:1920;
$base_height:938;
$base_imgW:3840;
$base_imgH:2160;

@function vw($px){
  @return ($px/$base_width)*100vw ;
}
@function vh($px){
  @return ($px/$base_height)*100vh ;
}

*{
  padding: 0;
  margin: 0;
  user-select: none;
}

body{
  width: 100vw;
  height: 100vh;
  background-color: #000;
  background-image: linear-gradient(135deg,#aa4b6b,#6b6b83,#3b8d99);
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn{
  width: 30vw;
  //height: 25vw;
  padding: 20px;
  position: relative;
  display: inline-block;
  color:#fff;
  //background-image: linear-gradient(180deg,#aa4b6b,#6b6b83,#3b8d99);
  font:1.5em 'Lobster', cursive;
  letter-spacing: 2px;
  border-radius: .7vw;
  transform: perspective(800px);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: .2s;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, .6);

  .bg-img{
    position: absolute;
    top: -30px;
    left: -51px;
    padding: 30px 51px;
    width: 100%;
    height: 100%;
    background-image: url($bg_img);
  background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 100;
  }
  .text{
    position: absolute;
    padding: vh(20) vw(10);
    bottom: 0;
    pointer-events: none;
    z-index: 200;
    h1,p{
      pointer-events: none;
      margin-bottom: vh(40);
    }
  }
  }



